//引入node.js的内置模块，path模块用于处理路径。
const path = require("path");
// 引入处理html的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 抽取 css的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//压缩css
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");



module.exports = {
    //1 入口,告诉webpack从哪里开始进行打包
    entry: {
        //公共的模块写在前面
        commonCss: "./src/js/common-css.js",
        //公共的js
        dom: "./src/js/common-js/dom.js",
        utils: "./src/js/common-js/utils.js",

        // 页面的模块写在后面
        index: "./src/js/index.js",//首页
        login: "./src/js/login.js",//登录页
        advertisement: "./src/js/advertisement.js",//广告页
        register: "./src/js/register.js",//注册
        run: "./src/js/run.js",//运动
        mine: "./src/js/mine.js",//我的
        personalData: "./src/js/personalData.js",//个人资料


    },
    //2 出口
    output: {
        path: path.resolve(__dirname, "dist"),//告诉webpack把打包后的文件存放在哪里，必须是绝对路径。
        filename: "js/[name]-[hash:5].js"
    },
    //3 加载器 loadeer
    module: {
        // 配置规则 
        rules: [
            //1 处理css文件 
            {
                test: /\.css$/,  // 匹配所有.css文件
                use: [
                    MiniCssExtractPlugin.loader,
                    // 'style-loader', // 创建style标签 把css插入html的head内
                    'css-loader', // 解析加载css到js中（把css打成字符串）。
                    "postcss-loader"
                ]

            },
            //2 处理less文件 
            {
                test: /\.less$/,  // 匹配所有.css文件
                use: [
                    // 'style-loader', // 创建style标签 把css插入html的head内
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析加载css到js中（把css打成字符串）。
                    'postcss-loader',
                    'less-loader'// 把less文件 转为 css文件 。
                ]

            },
            //3 处理背景图片
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    name: '[hash:8].[ext]',  // 图片输出的名字hash长度16位 默认32位
                    limit: 10 * 1024,  // 小于10kb base64处理
                    // 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
                    esModule: false,//关闭 es6的模块化，使用nodejs的模块化
                    outputPath: 'img' // 输出路径
                }
            },
            //4  处理html中的图片 
            {
                test: /\.html$/,  // 匹配所有.html文件
                // use: ['html-loader']
                loader: 'html-loader'
            },
            //5 处理字体文件 
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,  // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径
                }
            },
            //6 把es6转为es5
            {
                test: /\.js$/,
                loader: 'babel-loader',    // loader 编译es6为es5
                exclude: /node_modules/  // 排除
            }
        ]
    },
    //4 插件
    plugins: [
        // 首页
        new HtmlWebpackPlugin({
            template: "./src/page/index.html",
            filename: "index.html",
            chunks: ["index", "commonCss", "dom", "utils"]
        }),
        // 登录页面
        new HtmlWebpackPlugin({
            template: "./src/page/login.html",
            filename: "login.html",
            chunks: ["commonCss", "login", "dom", "utils"]
        }),
        // 广告页面
        new HtmlWebpackPlugin({
            template: "./src/page/advertisement.html",
            filename: "advertisement.html",
            chunks: ["advertisement", "commonCss", "dom", "utils"]
        }),
        // 注册页面
        new HtmlWebpackPlugin({
            template: "./src/page/register.html",
            filename: "register.html",
            chunks: ["commonCss", "register", "dom", "utils"]
        }),
        // 运动页面
        new HtmlWebpackPlugin({
            template: "./src/page/run.html",
            filename: "run.html",
            chunks: ["commonCss", "run", "dom", "utils"]
        }),
        // 我的页面
        new HtmlWebpackPlugin({
            template: "./src/page/mine.html",
            filename: "mine.html",
            chunks: ["commonCss", "mine", "dom", "utils"]
        }),
                // 个人资料页面
                new HtmlWebpackPlugin({
                    template: "./src/page/personalData.html",
                    filename: "personalData.html",
                    chunks: ["commonCss", "personalData", "dom", "utils"]
                }),


        // 处理css的插件
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash:5].css' // 重命名输出的css
        }),
        //压缩css的插件 
        // new OptimizeCssAssetsWebpackPlugin()

    ],
    //5 模式 development:开发模式
    mode: "development",
    // mode: "production"

    // 开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 666,  // 端口
        open: true, // 自动打开服务
        publicPath: '/',  // 默认dist就是服务器根目录 从根目录查找资源
        openPage: 'advertisement.html', // 打开的页面
    },
}